<template>
  <h1>我的购物车</h1>
  
  全选：<input type="checkbox" @click="clickAll"> 总价：{{ totalPrice }}
  <!-- <input type="checkbox"> 苹果 --- ￥5 --- <button>-</button> 1 <button>+</button> --- 总计：5元
  <br>
  <input type="checkbox"> 榴莲 --- ￥150 --- <button>-</button> 1 <button>+</button> --- 总计：5元 
  <br>
  <input type="checkbox"> 柚子 --- ￥45 --- <button>-</button> 1 <button>+</button> --- 总计：5元 -->
  <ul>
    <li v-for="item in list" :key="item.id" >
      <input type="checkbox" v-model="item.proStatus" @click="clickItem" /> 
      {{ item.name }} --- 
      ￥{{ item.price }} --- 
      <button @click="sub(item.id)">-</button> {{ item.num }} <button @click="add(item.id)">+</button> --- 
      总计：{{ item.num * item.price }} 元 </li>
  </ul>
</template>

<script>
const num1 = 1
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "苹果",
          price: 5,
          num: 2,
          proStatus: false
        },
        {
          id: 2,
          name: "榴莲",
          price: 180,
          num: 1,
          proStatus: false
        },
        {
          id: 3,
          name: "柚子",
          price: 45,
          num: 1,
          proStatus: false
        },
      ],
      totalPrice: 0
    }
  },

  methods: {
    clickAll(e) {
      this.list.forEach(item => {
        item.proStatus = e.target.checked
      })
      this.getTotalPrice()
    },
    getTotalPrice () {
      let _totalPrice = 0
      this.list.forEach(item => {
        if(item.proStatus) {
          _totalPrice += item.price * item.num
        }
      })
      this.totalPrice = _totalPrice
    },
    clickItem() {
      this.$nextTick(() => {
        this.getTotalPrice()
      })
    },
    sub(id) {
      const info = this.list.find(item => item.id === id)
      if(info.num === 1) return
      info.num--
      this.getTotalPrice()
    },
    add(id) {
      const info = this.list.find(item => item.id === id)
      info.num++
      this.getTotalPrice()
    }
  }
}
</script>

<style>
li {
  list-style: none;
}
</style>